<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .config-item {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: #f9f9f9;
        }
        .config-label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .config-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .config-description {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .save-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .save-btn:hover {
            background: #0056b3;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .current-config {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .current-config h3 {
            margin-top: 0;
            color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>配置管理</h1>
        
        <div class="current-config">
            <h3>当前配置</h3>
            <div id="currentConfig"></div>
        </div>
        
        <h2>修改配置</h2>
        <form id="configForm">
            <div class="config-item">
                <div class="config-label">图片服务器地址:</div>
                <input type="text" id="imageServerUrl" class="config-input" placeholder="例如: http://localhost:8070/profile">
                <div class="config-description">图片文件的完整服务器地址，不包含文件名</div>
            </div>
            
            <div class="config-item">
                <div class="config-label">API服务器地址:</div>
                <input type="text" id="apiServerUrl" class="config-input" placeholder="例如: http://localhost:8070">
                <div class="config-description">后端API服务器的地址</div>
            </div>
            
            <div class="config-item">
                <div class="config-label">应用名称:</div>
                <input type="text" id="appName" class="config-input" placeholder="例如: 出库管理系统">
                <div class="config-description">应用的显示名称</div>
            </div>
            
            <button type="submit" class="save-btn">保存配置</button>
        </form>
        
        <div id="status"></div>
    </div>

    <script>
        // 加载当前配置
        function loadCurrentConfig() {
            const config = window.APP_CONFIG || {};
            const currentConfigDiv = document.getElementById('currentConfig');
            
            currentConfigDiv.innerHTML = `
                <p><strong>图片服务器地址:</strong> ${config.IMAGE_SERVER_URL || '未设置'}</p>
                <p><strong>API服务器地址:</strong> ${config.API_SERVER_URL || '未设置'}</p>
                <p><strong>应用名称:</strong> ${config.APP_NAME || '未设置'}</p>
                <p><strong>版本号:</strong> ${config.VERSION || '未设置'}</p>
            `;
        }
        
        // 加载表单数据
        function loadFormData() {
            const config = window.APP_CONFIG || {};
            document.getElementById('imageServerUrl').value = config.IMAGE_SERVER_URL || '';
            document.getElementById('apiServerUrl').value = config.API_SERVER_URL || '';
            document.getElementById('appName').value = config.APP_NAME || '';
        }
        
        // 保存配置
        function saveConfig(event) {
            event.preventDefault();
            
            const newConfig = {
                IMAGE_SERVER_URL: document.getElementById('imageServerUrl').value.trim(),
                API_SERVER_URL: document.getElementById('apiServerUrl').value.trim(),
                APP_NAME: document.getElementById('appName').value.trim(),
                VERSION: '1.0.0'
            };
            
            // 验证配置
            if (!newConfig.IMAGE_SERVER_URL || !newConfig.API_SERVER_URL) {
                showStatus('请填写所有必填字段', 'error');
                return;
            }
            
            // 保存到localStorage
            localStorage.setItem('APP_CONFIG', JSON.stringify(newConfig));
            
            // 更新全局配置
            window.APP_CONFIG = newConfig;
            
            showStatus('配置保存成功！请刷新主页面以应用新配置。', 'success');
            loadCurrentConfig();
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.className = `status ${type}`;
            statusDiv.textContent = message;
            
            setTimeout(() => {
                statusDiv.textContent = '';
                statusDiv.className = '';
            }, 5000);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 尝试从localStorage加载配置
            const savedConfig = localStorage.getItem('APP_CONFIG');
            if (savedConfig) {
                try {
                    window.APP_CONFIG = JSON.parse(savedConfig);
                } catch (e) {
                    console.error('解析保存的配置失败:', e);
                }
            }
            
            loadCurrentConfig();
            loadFormData();
            
            // 绑定表单提交事件
            document.getElementById('configForm').addEventListener('submit', saveConfig);
        });
    </script>
</body>
</html> 